#{extends 'main.html' /}
#{set title:'Home' /}

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">驴妈妈hippo</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">上下级页面流向图 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div class="container">
	<div class="row">
		<form class="form-inline" action="/Application/index" method="post">
		  <div class="form-group">
		    <label for="exampleInputName2">Page Code</label>
		    <input type="text" class="form-control" id="pageCode" name="pageCode" placeholder="Page Code">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputEmail2">Date</label>
		    <input type="text" class="form-control" id="dateTime" name="dateTime" placeholder="start time">
		  </div>
		  <button type="button" id="generateBtn" class="btn btn-primary">Generate</button>
		</form>
	</div>
	<hr>
	<div class="row" id="container">
	</div>
</div>
<script type="text/javascript">
var tree = CollapsibleTree("#container");
$(document).ready(function(event) {
	$('.form-inline #dateTime').datepicker({format: "yyyy-mm-dd", autoclose: true});
	
	$("#generateBtn").click(function(){
		var pageCode = $("#pageCode").val();
		var dateTime = $("#dateTime").val();
		var parameters = "?pageCode=" + pageCode + "&dateTime=" + dateTime;
		tree.init('/Application/ajaxData' + parameters);
	});
  });
</script>